<template>
  <div class="card-article-content">
    <!-- <div>{{ data }}</div> -->
    <el-row class="pb-10">
      <el-col :md="2" :lg="2" :xl="2" hidden-md-and-down></el-col>
      <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
        <el-card class="w-full">
          <template #header>
            <div class="card-header">
              <div class="flex title-content justify-center pt-5 pb-5">
                <span class="mt-5"></span>
                <h3 class="pr-4 pl-4">{{ data.title }}</h3>
                <span class="mt-5"></span>
              </div>
              <el-row>
                <el-col :md="4" :lg="8" :xl="8" hidden-md-and-down></el-col>
                <el-col :xs="24" :sm="24" :md="16" :lg="8" :xl="8">
                  <div class="flex justify-center text-center sub-title">
                    <label class="flex-1 text-center">
                      <svg-icon icon-class="tips" /><span class="pl-3 whitespace-nowrap">{{ data.tips }}</span></label>
                    <label class="flex-1 flex-nowrap">
                      <svg-icon icon-class="time" /><span class="pl-3 whitespace-nowrap">{{ data.createTime
                        }}</span></label><label class="flex-1 flex-nowrap">
                      <svg-icon icon-class="lookNum" /><span class="pl-3 whitespace-nowrap">
                        {{ data.lookNum }}
                      </span></label>
                  </div>
                </el-col>
                <el-col :md="4" :lg="8" :xl="8" hidden-md-and-down></el-col>
              </el-row>
            </div>
          </template>
          <p v-for="(item, index) in data.content" :key="index" class="p-2 card-article-content">
            {{ item }}
          </p>
        </el-card>
      </el-col>
      <el-col :md="2" :lg="2" :xl="2" hidden-md-and-down></el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

</script>
<style lang="scss" scoped>
.card-article-content {
  font-size: var(--text-primary-size);

  .title-content {
    span {
      width: 40px;
      height: 1px;
      background-color: #000;
    }

    h3 {
      font-size: var(--text-h3-size);
    }
  }

  .sub-title {
    font-size: 15px;
  }

  .card-article-content {
    color: var(--color-text-title);
    font-size: var(--text-primary-size);
  }
}
</style>
